<template>
  <div v-permission="['stock:product:query']" class="app-container">

    <!-- 数据列表 -->
    <vxe-grid
      id="ProductStock"
      ref="grid"
      resizable
      show-overflow
      highlight-hover-row
      keep-source
      row-id="id"
      :proxy-config="proxyConfig"
      :columns="tableColumn"
      :toolbar-config="toolbarConfig"
      :pager-config="{}"
      :loading="loading"
      :height="$defaultTableHeight"
    >
      <template v-slot:form>
        <j-border>
          <j-form label-width="80px" @collapse="$refs.grid.refreshColumn()">
            <j-form-item label="仓库">
              <store-center-selector v-model="searchFormData.scId" />
            </j-form-item>
            <j-form-item label="商品编号">
              <a-input v-model="searchFormData.productCode" @keyup.enter="search" allow-clear />
            </j-form-item>
            <j-form-item label="商品名称">
              <a-input v-model="searchFormData.productName" @keyup.enter="search" allow-clear />
            </j-form-item>
            <j-form-item label="商品类目">
              <product-category-selector v-model="searchFormData.categoryId"  :only-final="false" />
            </j-form-item>
            <j-form-item label="商品品牌">
              <product-brand-selector v-model="searchFormData.brandId" />
            </j-form-item>
          </j-form>
        </j-border>
      </template>
      <!-- 工具栏 -->
      <template v-slot:toolbar_buttons>
        <a-space>
          <a-button type="primary" icon="search" @click="search">查询</a-button>
          <a-button type="primary" icon="search" @click="quickImport">快速出入库</a-button>
          <a-button v-permission="['stock:product:export']" type="primary" icon="download" @click="exportList">导出</a-button>
        </a-space>
      </template>
    </vxe-grid>
  </div>
</template>

<script>
import StoreCenterSelector from '@/components/Selector/StoreCenterSelector'
import ProductCategorySelector from '@/components/Selector/ProductCategorySelector'
import ProductBrandSelector from '@/components/Selector/ProductBrandSelector'

export default {
  name: 'ProductStock',
  components: {
    StoreCenterSelector, ProductCategorySelector, ProductBrandSelector
  },
  data() {
    return {
      loading: false,
      // 当前行数据
      id: '',
      ids: [],
      // 查询列表的查询条件
      searchFormData: {
        scId: '',
        productCode: '',
        productName: '',
        categoryId: '',
        brandId: ''
      },
      // 工具栏配置
      toolbarConfig: {
        // 自定义左侧工具栏
        slots: {
          buttons: 'toolbar_buttons'
        }
      },
      // 列表数据配置
      tableColumn: [
        { type: 'seq', width: '10%' },
        { field: 'productCode', title: '商品编号', width: '10%' },
        { field: 'productName', title: '商品名称', width: '15%' },
        { field: 'skuCode', title: 'Sku编号', width: '10%' },
        { field: 'scName', title: '仓库名称', width: '15%' },
        { field: 'stockNum', title: '库存数量', align: 'right', width: '10%' },
        { field: 'taxPrice', title: '参考单价', align: 'right', width: '10%' },
        { field: 'taxAmount', title: '库存总价', align: 'right', width: '10%' },
        { field: 'categoryName', title: '商品类目', width: '10%' },
        { field: 'brandName', title: '商品品牌', width: '10%' }
      ],
      // 请求接口配置
      proxyConfig: {
        props: {
          // 响应结果列表字段
          result: 'datas',
          // 响应结果总条数字段
          total: 'totalCount'
        },
        ajax: {
          // 查询接口
          query: ({ page, sorts, filters }) => {
            return this.$api.sc.stock.productStock.query(this.buildQueryParams(page))
          }
        }
      }
    }
  },
  created() {
  },
  methods: {
    // 列表发生查询时的事件
    search() {
      this.$refs.grid.commitProxy('reload')
    },
    // 快速出入库
    quickImport() {
      console.log('快速出入库')
    },
    // 查询前构建查询参数结构
    buildQueryParams(page) {
      return Object.assign({
        pageIndex: page.currentPage,
        pageSize: page.pageSize
      }, this.buildSearchFormData())
    },
    // 查询前构建具体的查询参数
    buildSearchFormData() {
      const params = Object.assign({}, this.searchFormData, {
        scId: this.searchFormData.scId,
        categoryId: this.searchFormData.categoryId,
        brandId: this.searchFormData.brandId
      })

      return params
    },
    exportList() {
      this.loading = true
      this.$api.sc.stock.productStock.exportList(this.buildQueryParams({})).then(() => {
        this.$msg.successTip('导出成功！')
      }).finally(() => {
        this.loading = false
      })
    }
  }
}
</script>
<style scoped>
</style>
